"use client"
import React from 'react';
import { Check, Star } from 'lucide-react';
import { useRouter } from 'next/navigation';
import { Card, CardContent, CardHeader } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export default function Pricing() {
  const router = useRouter();

  const monthProductId = "99ccafe0-47fa-4e93-8d6c-a165bf818986";
  const yearProductId = "672d32b7-fb76-452b-b682-79768f8e0085";

  const pricing = {
    tiers: [
      {
        title: "体验版",
        price: 0,
        nowPrice: 0,
        frequency: "",
        description: "注册使用，有限用量。",
        features: [
          "2 个主题",
          "10 个文案",
          "2 次视频字幕生成",
          "20 次ai创作",
          "30 次语音生成",
          "软件全部功能",
        ],
        cta: "免费注册使用",
        mostPopular: false,
      },
      {
        title: "月度会员",
        price: 39.8,
        nowPrice: 28.9,
        frequency: "/月",
        description: "适合个人用户，小规模使用。",
        features: [
          "20 个项目",
          "100 个文案",
          "每月 4 次视频字幕生成",
          "每月 300 次ai创作",
          "每月 300 次语音生成",
          "软件全部功能",
        ],
        cta: "购买一个月会员",
        mostPopular: false,
      },
      {
        title: "年度会员",
        price: 398,
        nowPrice: 289,
        frequency: "/年",
        description: "适合专业用户，适合使用频度较高的用户。",
        features: [
          "50 个项目",
          "1000 个文案",
          "每年 50 次视频字幕生成",
          "每年 3000 次ai创作",
          "每年 3000 次语音生成",
          "软件全部功能",
        ],
        cta: "购买一年会员",
        mostPopular: true,
      },
    ],
  };

  const handleBuy = async (plan: string) => {
    if (plan === "免费注册使用") {
      router.push('/register');
    } else if (plan === "购买一个月会员") {
    //   router.push(`/checkout/${monthProductId}`);
    } else if (plan === "购买一年会员") {
    //   router.push(`/checkout/${yearProductId}`);
    }
  };

  return (
    <section className="bg-gradient-to-b from-slate-50 to-white dark:from-slate-800 dark:to-slate-900 py-24">
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-20">
          <div className="inline-flex items-center px-4 py-2 rounded-full bg-green-50 dark:bg-green-900/30 border border-green-200 dark:border-green-700 mb-6">
            <span className="text-sm font-medium text-green-700 dark:text-green-300">💰 会员计划</span>
          </div>
          <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
            选择合适您的
            <br />
            <span className="bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
              会员计划
            </span>
          </h2>
          <p className="text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
            根据个人需求选择合适的会员计划，享受最优质的服务
          </p>
        </div>

        {/* Pricing Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          {pricing.tiers.map((tier, index) => (
            <Card
              key={tier.title}
              className={`relative bg-white/80 dark:bg-slate-800/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden ${
                tier.mostPopular ? 'ring-2 ring-blue-500 scale-105' : 'hover:-translate-y-2'
              }`}
            >
              {tier.mostPopular && (
                <div className="absolute top-0 left-0 right-0 bg-gradient-to-r from-blue-600 to-indigo-600 text-white text-center py-2 text-sm font-semibold">
                  <Star className="inline w-4 h-4 mr-1" />
                  最受欢迎
                </div>
              )}
              
              <CardHeader className={`text-center space-y-4 ${tier.mostPopular ? 'pt-12' : 'pt-8'}`}>
                <h3 className="text-2xl font-bold text-gray-900 dark:text-white">
                  {tier.title}
                </h3>
                <div className="space-y-2">
                  <div className="flex items-baseline justify-center space-x-2">
                    <span className="text-5xl font-bold bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent">
                      ￥{tier.nowPrice}
                    </span>
                    {tier.price > 0 && (
                      <span className="text-xl text-gray-400 line-through">
                        ￥{tier.price}
                      </span>
                    )}
                    <span className="text-xl font-semibold text-gray-600 dark:text-gray-300">
                      {tier.frequency}
                    </span>
                  </div>
                  <p className="text-gray-600 dark:text-gray-300">{tier.description}</p>
                </div>
              </CardHeader>

              <CardContent className="space-y-6">
                <ul className="space-y-4">
                  {tier.features.map((feature, featureIndex) => (
                    <li key={featureIndex} className="flex items-center space-x-3">
                      <div className="flex-shrink-0 w-5 h-5 bg-gradient-to-r from-green-500 to-green-600 rounded-full flex items-center justify-center">
                        <Check className="w-3 h-3 text-white" />
                      </div>
                      <span className="text-gray-700 dark:text-gray-300">{feature}</span>
                    </li>
                  ))}
                </ul>

                <Button
                  onClick={() => handleBuy(tier.cta)}
                  className={`w-full h-12 font-semibold transition-all duration-200 ${
                    tier.mostPopular
                      ? 'bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white shadow-lg hover:shadow-xl'
                      : 'bg-slate-100 dark:bg-slate-700 text-gray-900 dark:text-white hover:bg-slate-200 dark:hover:bg-slate-600'
                  }`}
                >
                  {tier.cta}
                </Button>
              </CardContent>
            </Card>
          ))}
        </div>
      </div>
    </section>
  );
}
